<template>
	<view class="">
		<view class="datum-pic fboxCol">
			<image v-if="layoutType == 0" class="avatarImg" :src="innerData.img" mode="aspectFill"></image>
		</view>
		<view class="datum-info">
		  <view class="fboxRow Ycenter">
			<view class="title flex1 fboxCol Xbetween font22 color-36363A font28">{{layoutType == 0 ? innerData.specialSubjectName : innerData.materialsName}}</view>
		   <view v-if="sys.platform == 'ios'" class="font24" style="color: #E85531;">{{innerData.price == 0 ? '免费' : innerData.vipPrice == 0 && innerData.valuation == 1 ? 'VIP免费' : '--'}}</view>
			<view v-else class="fboxRow Ycenter price-box">
			  <view v-if="innerData.valuation != 1" class="font24" style="color: #E85531;">{{innerData.price == 0 ? '免费' : '￥'+innerData.price}}</view>
			  <view v-else class="fboxRow Ycenter">
				<view class="color-969699 font20" style="text-decoration:line-through">￥{{innerData.price}}</view>
				<view class="font24" style="margin-left: 10rpx; color: #E85531;">
				  {{innerData.vipPrice == 0 ? 'VIP免费': 'VIP￥'+innerData.vipPrice}}
				</view>
			  </view>
			</view>
		  </view>
		  <view class="footer fboxRow Xbetween">
			<view v-if="layoutType == 0" class="font22 color-9899A1 flex1">
			  <text class="bksCIcon bks-c-ziyuan16weishoucang font22"></text>
			  <text style="margin: 0 29rpx 0 7rpx">{{innerData.collectNum}}</text>
			  <text class="bksCIcon bks-c-ziyuan35chakan font22"></text>
			  <text style="margin: 0 29rpx 0 7rpx">{{innerData.viewNum}}</text>
			</view>
			<view v-else class="color-6A6A6F font22">
				<text v-for="(item, index) in innerData.gradeTags" :key="'gradeTags'+index">{{index != 0 ? '，':''}}{{item}}</text>
				<text style="margin: 0 20rpx" v-if="innerData.gradeTags.length && innerData.tags.length">|</text>
				<text v-for="(item, index) in innerData.tags" :key="'tags'+index">{{index != 0 ? '，':''}}{{item}}</text>
			</view>
			<view class="color-969699 font22" >{{innerData.gmtModified}}</view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			layoutType: {
				type: [Number, String],
				default: 0 // 0 专题 | 1资料
			},
			// 是否跳转链接
			toLink: {
				type: Boolean,
				default: true,
			},
			// 当前项数据
			innerData: {
				type: Object,
				default: () => {
					return {
						"collectNum": 0,
						"gmtCreate": "",
						"img": "",
						"introduction": "",
						"isCollected": false,
						"price": 0,
						"remark": "",
						"specialSubjectId": "",
						"specialSubjectName": "",
						"valuation": "",
						"viewNum": 0,
						"vipPrice": 0
					}
				}
			}
		},
		data() {
			return {
				sys: {}
			}
		},
		mounted() {
			try{
				this.sys = uni.getSystemInfoSync();
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			pageto(e) {
			  const {isDelete, isBan, specialSubjectId} = this.innerData
			  if(isDelete == 1){
				uni.showToast({
				  title: '专题已被删除',
				  icon: 'none'
				})
			  }else if (isBan == 1) {
				uni.showToast({
				  title: '专题已被下架',
				  icon: 'none'
				})
			  } else{
				this.$pageTo('/bks/datum/topic/index', {
				  id: specialSubjectId
				})
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>
.datum-pic{position: relative;margin-bottom: 20rpx;}
.datum-pic .avatarImg {width:750rpx; height: 340rpx;overflow: hidden;}

.datum-info {padding: 10rpx 0 30rpx;margin: 0 30rpx;}
.datum-info .title {line-height: 40rpx;overflow: hidden;text-overflow: ellipsis; display: -webkit-box; line-clamp: 2;}
.datum-info .footer{margin-top: 20rpx;overflow: hidden;}
</style>